<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>异清轩博客</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.ias.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <!--[if gte IE 9]><!-->
    <script src="js/html5shiv.min.js" type="text/javascript"></script>
    <script src="js/respond.min.js" type="text/javascript"></script>
    <!--<![endif]-->
</head>
<body class="user-select">
<div id="app">

    <header class="header">
        <nav class="navbar navbar-default" id="navbar">
            <div class="container">
                <div class="header-topbar hidden-xs link-border">
                    <ul class="site-nav topmenu">
                        <li><a href="tags.html">标签云</a></li>
                        <li><a href="readers.html" rel="nofollow">读者墙</a></li>
                        <li><a href="links.html" rel="nofollow">友情链接</a></li>
                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button"
                                                aria-haspopup="true" aria-expanded="false" rel="nofollow">关注本站 <span
                                class="caret"></span></a>
                            <ul class="dropdown-menu header-topbar-dropdown-menu">
                                <li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i
                                        class="fa fa-weixin"></i>
                                    微信</a></li>
                                <li><a href="#" rel="nofollow"><i class="fa fa-weibo"></i> 微博</a></li>
                                <li><a data-toggle="modal" data-target="#areDeveloping" rel="nofollow"><i
                                        class="fa fa-rss"></i> RSS</a></li>
                            </ul>
                        </li>
                    </ul>
                    <a data-toggle="modal" data-target="#loginModal" class="login"
                       rel="nofollow">Hi,请登录</a>&nbsp;&nbsp;<a data-toggle="modal" data-target="#regModal"
                                                                  class="register" rel="nofollow">我要注册</a>&nbsp;&nbsp;<a
                        href="" rel="nofollow">找回密码</a>
                </div>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#header-navbar" aria-expanded="false"><span class="sr-only"></span> <span
                            class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                    </button>
                    <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="images/logo.png" alt=""></a></h1>
                </div>
                <div class="collapse navbar-collapse" id="header-navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden-index active"><a data-cont="异清轩首页" href="index.html">首页</a></li>
                        <li><a href="category.html">前端技术</a></li>
                        <li><a href="category.html">后端程序</a></li>
                        <li><a href="category.html">管理系统</a></li>
                        <li><a href="category.html">授人以渔</a></li>
                        <li><a href="category.html">程序人生</a></li>
                    </ul>
                    <form class="navbar-form visible-xs" action="/Search" method="post">
                        <div class="input-group">
                            <input type="text" name="keyword" class="form-control" placeholder="请输入关键字"
                                   maxlength="20" autocomplete="off">
                            <span class="input-group-btn">
                                <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    <section class="container">
        <div class="content-wrap">
            <div class="content">
                <div class="jumbotron">
                    <h1>欢迎访问博客</h1>
                    <p>在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</p>
                </div>
                <div id="focusslide" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#focusslide" data-slide-to="0" class="active"></li>
                        <li data-target="#focusslide" data-slide-to="1"></li>
                        <li data-target="#focusslide" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <div class="item active"><a href="" target="_blank"><img src="images/banner/banner_01.jpg"
                                                                                 alt=""
                                                                                 class="img-responsive"></a>
                        </div>
                        <div class="item"><a href="" target="_blank"><img src="images/banner/banner_02.jpg" alt=""
                                                                          class="img-responsive"></a>
                        </div>
                        <div class="item"><a href="" target="_blank"><img src="images/banner/banner_03.jpg" alt=""
                                                                          class="img-responsive"></a>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                            class="sr-only">上一个</span>
                    </a>
                    <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
                            class="sr-only">下一个</span>
                    </a>
                </div>

                <article class="excerpt-minic excerpt-minic-index">
                    <h2><span class="red">【今日推荐】</span><a :href="topArticle.imgurl" :title="topArticle.title">{{ topArticle.title }}</a></h2>
                    <p class="note">{{ topArticle.content }}</p>
                </article>


                <div v-for="(article, index) in articles" :key="index">
                    <article class="excerpt">
                        <a class="focus" :title="article.title">
                            <img class="thumb" :data-original="article.imgurl" :src="article.imgurl" alt="">
                        </a>
                        <header>
                            <h2><a :title="article.title">{{ article.title }}</a></h2>
                        </header>
                        <p class="note">{{ article.content }}</p>
                    </article>
                </div>

                <nav class="pagination">
                    <ul>
                        <li class="prev-page"></li>
                        <li class="active"><span>1</span></li>
                        <li><a href="?page=2">2</a></li>
                        <li class="next-page"><a href="?page=2">下一页</a></li>
                        <li><span>共 2 页</span></li>
                    </ul>
                </nav>
            </div>
        </div>
        <aside class="sidebar">
            <div class="fixed">
                <div class="widget widget_search">
                    <form class="navbar-form" action="/Search" method="post">
                        <div class="input-group">
                            <input type="text" name="keyword" class="form-control" size="35" placeholder="请输入关键字"
                                   maxlength="15" autocomplete="off">
                            <span class="input-group-btn">
                                <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </aside>
    </section>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2016 <a href="">ylsat.com</a> &nbsp; <a href="http://www.miitbeian.gov.cn/" target="_blank"
                                                              rel="nofollow">豫ICP备20151109-1</a> &nbsp; <a
                    href="sitemap.xml" target="_blank" class="sitemap">网站地图</a></p>
        </div>
        <div id="gotop"><a class="gotop"></a></div>
    </footer>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            articles: [
                {
                    "id": 1,
                    "title": "测试数据1",
                    "publishtime": "2024-11-19 22:19:18",
                    "content": "测试数据测试数据测试数据",
                    "imgurl": "https://yc-leadnews.oss-cn-beijing.aliyuncs.com/image/2e79396913564127b1972c2127d4c35b屏幕截图 2024-08-29 172411.png",
                }
            ]
        },
        created() {
            this.getArticles();
        },
        methods: {
            getArticles() {
                axios.get('/api/v1/articles')
                    .then((response) => {  // 使用箭头函数
                        this.articles = response.data.data;
                        console.log(this.articles);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        computed: {
            // 计算属性：获取 ID 最大的文章
            topArticle() {
                // 返回 articles 中 id 最大的那一篇
                return this.articles.reduce((max, article) => (article.id > max.id ? article : max), this.articles[0]);
            }
        }
    });

</script>
</body>
</html>
